<template lang="pug">
    .carindex-list()
        mt-index-list()
            mt-index-section(index="热")
                ul(class="hot-list clearfix")
                    li(v-for="(item,index) in hotCarList",class="item base-line--bottom",:key="index")
                        img(:src="item.logo",@click="showCarList(item.name,item.id)")
                        span {{item.name}}
            mt-index-section(:index="item",v-for="(item,index) in code",:key="index")
                ul(class="index-list base-line--top")
                    li.base-line--bottom(v-for="(car,index) in getIndexListByType(item)",@click="showCarList(car.name,car.id)")
                        img(:src="car.logo")
                        span {{car.name}}

</template>

<script>
export default {
  name: '',
  data () {
    return {
      hotCarList: [],
      indexCarList: [],
      code: []
    //   code: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  },
  components: {

  },
  watch: {

  },
  mounted () {
    this.$nextTick(() => {
      this.getList()
    })
  },
  methods: {
    async getList () {
      let arr = []
      let oList = await carAPI.getallautobrand()
      this.indexCarList = oList.brands
      this.hotCarList = oList.hotBrands
      this.indexCarList.forEach(item => {
        arr.push(item.alphabet)
      })
      this.code = Array.from(new Set(arr))
    },
    getIndexListByType (type) {
      return this.indexCarList.filter(item => {
        return item.alphabet === type
      })
    },
    showCarList (...args) {
      this.$emit('carInfo', args)
    }
  }
}
</script>

<style scoped lang="scss" >

.carindex-list{
    height: 100%;
    .mint-indexlist{
        height: 100%;
    }
    .hot-list{
        background: #fff;
        li{
            width: 20%;
            float: left;
            text-align: center;
            padding: 20px 0;
            img{
                width: 70px;
                height: 70px;
            }
            span{
                display: block;
                font-size: 16px;
                line-height: 36px;
            }
        }
    }
    .index-list{
        background: #fff;
        li{
            display: flex;
            align-items: center;
            padding: 15px 20px;
            img{
                width: 65px;
                height: 65px;
                margin-right: 20px;
            }
        }
    }
}
</style>
